<style lang="scss" scoped>
.btn1 {
    width: 90%;
    height: 1.1rem;
    background-color: #1c94fd;
    color: #fff;
    font-size: 0.4rem;
    border: none;
    border-radius: 0.5rem;
    position: fixed;
    bottom: 50px;
    left: 5%;
}

.xm1 {
    background: #f5f6f8;
    height: 130px;
    padding: 10px;
}

.xm {
    display: flex;
    line-height: 30px;
    margin-left: 10px;

    b {
        margin-right: 10px;
    }
}
.xm2{
    margin-left: 10px;
}

.box {
    width: 90%;
    margin: 0 auto;
    margin-top: 5px;

    .address {
        margin-left: 10px;
        margin-top: 10px;
    }
}

.bianji {
    float: right;

    button {
        margin-left: 20px;
        border-radius: 10px;
        margin-top: 20px;
        width: 40px;
        height: 20px;
        border: 1px solid #64b8ff;
        color: #64b8ff;
    }
}
</style>
<template>
    <div class="box" style="overflow-y: scroll;">
            <van-nav-bar title="地址管理" left-text="返回" left-arrow @click-left="$router.go(-1)" />
        <div v-if="addressList.length > 0" class="addressList">
            <!-- 地址列表 -->
            <div v-for="(item, index) in listdata" :key="index">
                <div class="box">
                    <div class="xm1">
                        <div class="xm">
                            <b>{{ item.name.slice(0, 1) + '**' }}</b><b>{{ item.tel }}</b>
                        </div>
                         <div class="xm2">
                            <b>{{ item.address }}</b>
                        </div>
                        <p>{{ item.text }}</p>
                        <div class="bianji">
                            <button @click="edit(item)">编辑</button>
                            <button @click="del(item.id)">删除</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-button class="btn1" round block type="primary" @click="onClickaddress">新增地址列表</van-button>
    </div>

 
</template>
<script setup lang="ts">
import axios from 'axios'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showConfirmDialog, showToast } from 'vant';
import { id } from 'element-plus/es/locale/index.mjs';
const listdata: any = ref([])
const list = async () => {
    const res = await axios.get('api/v1/addressList')
    listdata.value = res.data.data
    console.log(res.data.data);
    
}
list()
const router = useRouter()
// 地址列表
// 新增地址
const onClickaddress = () => {
    router.push('/dizhi1')
}
// 删除地址
const del =async(id: number) => {
const res=await axios.delete('/api/v1/addressDelete?id='+id)
if(res.data.code==200){
    if(confirm('确定删除吗?')){
        showToast('删除成功')
        list()
    }else{
        showToast('取消删除')
    }
}
}
// 点击编辑回显
const addressList = ref<any>([]);
const getAddressList = async () => {
    const res = await axios.get('/api/v1/addressList')
    addressList.value = res.data.data;

}
getAddressList()
const edit = async (item: any) => {
    router.push({
        path: '/dizhi1',
        query: {
            item: JSON.stringify(item)
        }
    })
}
</script>
